<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
  }
  body{
    /* display: flex; */
  }
  .outer{
    background-color: gray;
    width: 300px;
    /* float: left; */
    /* position: absolute; */
    /* display: inline-block; */
    /* display: table; */
    /* overflow: auto; */
    /* column-count: 1; */
    /* display: flow-root; */
  }
  .inner{
    width: 100px;
    height: 100px;
    margin: 20px;
 
  }
  .inner1{
    background-color: aquamarine;
  }
  .inner2{
    background-color: blue;
  }
  .inner3{
    background-color: yellow;
  }
</style>
<body>
  <div class="outer">
    <div class="inner inner1"></div>
    <div class="inner inner2"></div>
    <div class="inner inner3"></div>

  </div>
  
</body>
</html>